<template>
<!-- v-model 默认绑定的是当前选中的标签 -->
  <el-tabs v-model="editableTabsValue"
           type="card"
           closable
           @tab-remove="removeTab"
           @tab-click="clickTab">
    <el-tab-pane
        v-for="(item, index) in editableTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name"
    >
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  name: "Tabs",
  data() {
    return {}
  },
  //计算属性 用于获取当前选中的标签和所有的标签
  computed: {

    editableTabsValue: {
      //获取出当前选中的标签
      get() {
        return this.$store.state.menus.editableTabsValue
      },
      set() {

      }
    },
    editableTabs: {
      //获取出所有的标签对象
      get() {
        return this.$store.state.menus.editableTabs
      },
      set() {

      }

    }
  },
  methods: {

    //删除标签(参数是我们要删除的标签名)
    removeTab(targetName) {
      //所有的标签
      let tabs = this.editableTabs;
      //当前选中的标签
      let activeName = this.editableTabsValue;
      //如果标签数量为1 那么不能删除 直接返回
      if (tabs.length === 1) return
      //如果删除的是我们选中的
      if (activeName === targetName) {
        //遍历所有的标签
        tabs.forEach((tab, index) => {
          //找到了当前选中的标签
          if (tab.name === targetName) {
            //找到选中标签的下一个或者上一个标签
            let nextTab = tabs[index + 1] || tabs[index - 1];
            //如果存在这样的标签
            if (nextTab) {
              //我们选中这个标签
              activeName = nextTab.name;
            }
          }
        });
      }
      //这是状态中当前选中的标签名
      this.$store.state.menus.editableTabsValue = activeName;
      //过滤出我们要删除的标签
      this.$store.state.menus.editableTabs = tabs.filter(tab => tab.name !== targetName);
    },
    //点击标签的时候
    clickTab(tab) {
      //路由跳转 路径就是tab.name
      this.$router.push({name: tab.name})
      //这里点击之后默认选中了该标签
    }
  }
}
</script>

<style scoped>

</style>
